import React, { useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
import css from './index.module.scss'
import './index.css'

type TLBR  = "left" | "top" | "right" | "bottom" |'center'
interface  ModalProps{
  isShow:boolean;
  position?:"left" | "top" | "right" | "bottom" |'center'
  chilren?:React.ReactNode;
  // isShow:boolean;
  close:()=>void
}


function Modal(props:ModalProps){
  const {position,chilren,close,isShow} = props;
   const SurePosition = ()=>{
    switch(position){
     case "left":
       return css.left;
     case "right":
       return css.right;  
     case "top":
       return css.top
     case "bottom":
       return css.bottom;
     default:
       return css.center;
    }
  }
  // 
  return <>
   <CSSTransition in={isShow}
            classNames={"top"}
            timeout={1000}
            unmountOnExit={true}
      >

<div className={`${css.modal}`}  > 
     <div className={css.close} onClick={close}/>
     <div className={SurePosition()}>
      {
        chilren? chilren:'我是modal内容'
      }
     </div>
   </div>

       </CSSTransition>
  
  </>

}

export default Modal